<template>
  <div class="mine-box" :style="{background : skinInfo.backImg ?'url('+skinInfo.backImg+')'  : skinInfo.backColor ? skinInfo.backColor : '#FFFFFF'}">
    <!-- <Header :headerObj = 'headerObj' /> -->
    <div class="mine-header">
      <van-icon name="arrow-left" class="title-icon" @click="clickBack" />
      <div class="m-show-r">
        <img class="mine-head-img" :src="userInfo_tx + '?x-oss-process=image/resize,m_fixed,h_140,w_140'" />
      </div>
      <div class="m-s-name">
        <span>{{nikename == null ? un : nikename}}</span>
      </div>
      <p class="m-s-id"> ID: {{this.$store.state.userInfo.un}} </p>
    </div>
    <ul class="mine-info">      
      <li @click="linkRecording">
        <div class="m-info-left">
          <Iconfont iconClass="jilu2" />
        </div>
        <div class="m-info-right">
          <p class="mine-info-text">观看记录</p>
          <Iconfont class="arrow-right" iconClass="youjiantou2" />
        </div>
      </li>
      <li @click="linkMineAttention">
        <div class="m-info-left center">
          <van-icon name="friends-o" color="#ff4400"  size="1.4rem"/>
        </div>
        <div class="m-info-right">
          <p class="mine-info-text">我的关注</p>
          <Iconfont class="arrow-right" iconClass="youjiantou2" />
        </div>
      </li>
      <li @click="linkMineShouCang">
        <div class="m-info-left">
          <Iconfont iconClass="xin" />
        </div>
        <div class="m-info-right">
          <p class="mine-info-text">我的收藏</p>
          <Iconfont class="arrow-right" iconClass="youjiantou2" />
        </div>
      </li>
      <li @click="linkMyRedPacket" v-if="$channel!='zxjtqh'">
        <div class="m-info-left">
          <Iconfont iconClass="wodehongbao" />
        </div>
        <div class="m-info-right">
          <p class="mine-info-text">我的红包</p>
          <Iconfont class="arrow-right" iconClass="youjiantou2" />
        </div>
      </li>
      <li @click="linkMinePrize">
        <div class="m-info-left">
          <Iconfont iconClass="dingdan" />
        </div>
        <div class="m-info-right">
          <p class="mine-info-text">我的奖品礼券</p>
          <Iconfont class="arrow-right" iconClass="youjiantou2" />
        </div>
      </li>
      <li @click="linkMineOrder" v-if="$channel =='zxjtqh'">
        <div class="m-info-left center">
          <img :src="require('../assets/images/zxjtqh/my_order.png')" alt="">
        </div>
        <div class="m-info-right">
          <p class="mine-info-text">我的订购</p>
          <Iconfont class="arrow-right" iconClass="youjiantou2" />
        </div>
      </li>
      <!--<li @click="linkjilu">
        <div class="m-info-left">
          <Iconfont iconClass="zhongjiangjilu" />
        </div>
        <div class="m-info-right">
          <p class="mine-info-text">中奖记录 </p>
          <Iconfont class="arrow-right" iconClass="youjiantou2" />
        </div>
      </li>-->
      <li @click="clickMineSafety">
        <div class="m-info-left center">
          <img class="safety" src="../assets/images/anquan.png" alt="">
        </div>
        <div class="m-info-right">
          <p class="mine-info-text">安全中心</p>
          <Iconfont class="arrow-right" iconClass="youjiantou2" />
        </div>
      </li>
    </ul>
    <!-- <div v-if="isShowYinSi" class="yinsi">
      <p>隐私保护详细说明请阅读 <span @click="seeYinsi">《隐私政策》</span></p>
    </div> -->
  </div>
</template>

<script>
  // import privacyText from './homeComponents/privacyText.vue'
  import fun from "../util/function";
  export default {
    components: {
      // privacyText
    },
    data() {
      return {
        isPrivacy: false,
        nikename: this.$store.state.userInfo.nickname || window.localStorage.getItem('userNickName'),
        un: this.$store.state.userInfo.un,
        userInfo_tx: this.$store.state.userInfo.wxpic || imgTx,
        onlyChannel: this.$channel,
        getPlatform: fun.getPlatform(), //app wx
        headerObj: {
          'isShowBack': true,
          'isShowClose': false,
          'isShowMine': false,
          'fromType': 'mine',
          'titleText': '蜻蜓Live',
          'color': 'white'
        },
        mineHeaderClass: '',
        zxxykzxClass: '',
      }
    },
    created: function () {
      this.dotNum()
      this.$store.dispatch("mineClass", "nav5")
      window.sessionStorage.setItem(this.$channel + "_mineCollectNum", 2)
    },
    watch: {},
    computed: {
      skinInfo() {
        return this.$store.state.skinStoreInfo
      }
    },
    mounted() { },
    destroyed: function () {
      this.$store.dispatch("mineClass", "nav55")
    },
    methods: {
      clickBack() {
        this.$router.push(`/${this.$channel}/home`);
      },
      linkMinePrize() {
        this.FunctionDot("我的奖品礼券")
        this.$router.push(`/${this.$channel}/minePrizeListPage`)
      },
      linkMineOrder() {
        this.$router.push(`/${this.$channel}/mineOrder`)
      },
      dotNum() { //统计
        let _this = this;
        var argumentData = {
          sessionId: "mine_page", //场次id
          streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
          actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
          playSource: fun.getPlatform(), //微信 app
          url: window.location.href, //当前的url
        };
        _this.$http.post("/h5live/recordData", argumentData, {
          headers: {
            "Content-Type": "application/json"
          }
        })
          .then(
            res => {
              //console.log(res)
            },
            err => {
              console.log(err);
            }
          );
      },
      linkMineAttention: function () {
        this.FunctionDot("我的关注")
        this.$router.push(`/${this.$channel}/mineAttention`)
      },
      linkjilu: function () {
        this.$router.push(`/${this.$channel}/changeName`)
      },
      linkMineShouCang() {
        this.FunctionDot("我的收藏")
        this.$router.push(`/${this.$channel}/mineCollect`)
      },
      //点击编辑
      editInfo() {
        this.$router.push(`/${this.$channel}/personalInfo`)
      },
      //红包
      linkMyRedPacket() {
        this.FunctionDot("我的红包")
        this.$router.push(`/${this.$channel}/mineRedPacket`)
      },
      linkRecording() {
        this.FunctionDot("观看记录")
        this.$router.push(`/${this.$channel}/watchHistory`)
      },
      // 跳转安全中心
      clickMineSafety() {
        this.FunctionDot("安全中心")
        this.$router.push(`/${this.$channel}/mineSafety`);
      },
      //中信建投功能埋点
      FunctionDot(functionName) {
        if (this.$channel !== 'zxjt') return
        $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick',
          {
            page_name: '我的',
            function_name: functionName
          }
        );
      }
    },
    watch: {
      // 用户信息
      "$store.state.userInfo"(newval, olval) {
        this.userInfo_tx = newval.wxpic;
        this.nikename = newval.nickname
        this.un = newval.un
      },
    }
  }
</script>

<style scoped="scoped" lang="less">
  .mine-box {
    width: 100%;
    height: 100%;
    background: transparent;
    background-size: 100% 1334px !important;
    .mine-header {
      height: 320px;
      background: url(../assets/images/mine-top-bg.png) no-repeat;
      background-size: 100% 320px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;
      .title-icon {
        width: 88px;
        height: 88px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        top: 0;
        font-size: 38px;
      }
      .m-show-r {
        width: 140px;
        height: 140px;
        margin-top: 50px;
        .mine-head-img {
          width: 140px;
          height: 140px;
          border-radius: 50%;
        }
      }
      .m-s-name {
        color: #272727;
        width: 750px;
        display: flex;
        justify-content: center;
          span {
          padding-top: 10px;
          font-size: 28px;
          font-weight: bold;
        }
        i {
            font-size: 50px;
        }

      }
      .m-s-id {
        margin-top: 10px;
        font-size: 28px;
        font-weight: bold;
        color: #ccc;
        text-align: center
      }
    }
  }






  .mine-info {
    /*box-shadow: 0px -2px 0px 0px #B7B7B7;
		border-radius: 20px 20px 0px 0px;*/
    width: 100%;
    li {
    width: 100%;
    height: 110px;
    display: flex;
  }
  }

  .m-info-left {
    width: 116px;
    text-align: center;
    .iconfont {
      font-size: 40px;
      color: #ff4400;
      line-height: 110px;
    } 
  .safety {
    height: 40px;
    width: 38px;
    background: url('../assets/images/anquan.png') no-repeat;
    background-size: 100% 100%;    
  }
    &.center{
      display: flex;
      justify-content: center;
      align-items: center;
    }

    >img {
      width: 40px;
      height: 40px;
      font-size: 0;
      margin: auto;
    }
  }
  .m-info-right {
    width: 590px;
    border-bottom: 1px solid #C5C5C5;
    align-items: center;
    display: flex;
    justify-content: space-between;
    .mine-info-text {
      color: #0C0C0C;
      font-size: 32px;
    }
    .arrow-right {
      font-size: 30px;
      color: #ccc;
      line-height: 110px;
      font-weight: 600;
    }
  }
</style>